<template>
  <div style="font-size: 20px">
    <img src="../../../../assets/image/jianshe/title.png" alt="" />
    建设成本
  </div>
  <colums_nomal
    :xlabel="[
      '污水收集完善',
      '源头小区海绵建设',
      '面源污染控制',
      '内源治理生态修复',
      '内涝防治',
    ]"
    :echartsId="'xmkh2_colums'"
    :echartsData="echartsColumData"
    :derection="'h'"
    :unit="'万元'"
    :showFakeLenfend="false"
    :barWidth="'15%'"
    :key='refreshKey'
  ></colums_nomal>
</template>

<script setup lang="ts">
import { ComponentInternalInstance } from "vue";
import { useFunc } from "@/hook/useFunc";

const visible = ref(true)
const refreshKey = ref(0)

const props = defineProps({
  selectValue: {
    type: Number,
    default: 2024,
  },
});
const jsonData: any = inject("jsonData");
const data = computed(() => {
  let arr = [];
  try {
    arr =allData.value[props.selectValue];
  } catch (error) {}
  return arr;
});
const allData = ref<any>({})

onBeforeMount(async() => {
  allData.value= await  useFunc().getData("jsgl","jscb");
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const echartsColumData = ref(<any>[]);

watch(
  () => data.value,
  (value) => {
    if (value) {
      visible.value = false
      echartsColumData.value = [
        { 
          name: "建设成本",
          value,
        },
      ];
      refreshKey.value+=1
      nextTick(() => {
        visible.value = true
      })
    }
  }
);

// const echartsColumData=ref([
//     {
//         name: "规划",
//         value:[20, 36, 40 , 50, 60]
//     },

// ])
</script>

<style></style>
